<template>
  <view :style="colorStyle">
    <view class="infobox1 flex aitems between">
      <view class="block1 c858585 f28"> 头像 </view>
      <!-- #ifdef MP-WEIXIN -->
      <view class="block2" style="position: relative">
        <image
          :src="info.avatar ? info.avatar : require('@/static/headimg.png')"
          mode="aspectFill"
        ></image>
        <button
          class="avatar-wrapper"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        ></button>
      </view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="block2" @click="uploadImg">
        <image
          :src="info.avatar ? info.avatar : require('@/static/headimg.png')"
          mode="aspectFill"
        ></image>
      </view>
      <!-- #endif -->
    </view>
    <view class="infobox1 flex aitems between">
      <view class="block1 c858585 f28"> 昵称 </view>
      <view class="block3">
        <input
          type="nickname"
          v-model="info.nickName"
          placeholder="请输入昵称"
          class="c1F1F1F f28"
          placeholder-class="c858585 f28"
        />
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view class="infobox1 flex aitems between">
      <view class="block1 c858585 f28"> 手机号码 </view>
      <view class="block3 c1F1F1F f28" v-if="info.mobile">
        {{ info.mobile }}
      </view>

      <view class="block3 themeColor f28" style="position: relative" v-else>
        <button
          open-type="getPhoneNumber"
          @getphonenumber="getphonenumber"
          class="avatar-wrapper"
        ></button>
        获取手机号码
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view class="infobox1 flex aitems between">
      <view class="block1 c858585 f28"> 手机号码 </view>
      <view class="block3">
        <input
          type="number"
          maxlength="11"
          v-model="info.mobile"
          placeholder="请输入手机号码"
          class="c1F1F1F f28"
          placeholder-class="c858585 f28"
        />
      </view>
    </view>
    <view class="infobox1 flex aitems between" style="position: relative">
      <view class="block1 c858585 f28"> 验证码 </view>
      <view class="block3" style="position: relative; right: 150rpx">
        <input
          type="text"
          v-model="smsCode"
          placeholder="请输入验证码"
          class="c1F1F1F f28"
          placeholder-class="c858585 f28"
          style="text-align: right"
        />
      </view>
      <view
        class="block3 themeColor f28"
        style="position: absolute; right: 30rpx"
        @click="getCode"
      >
        {{ codetext }}
      </view>
    </view>
    <!-- #endif -->
    <view class="infobox1 flex aitems between" style="position: relative">
      <picker
        class="avatar-wrapper"
        mode="selector"
        :range="sexList"
        range-key="name"
        @change="sexChange"
      >
        <view class="avatar-wrapper"></view>
      </picker>
      <view class="block1 c858585 f28"> 性别 </view>
      <view class="block3 c1F1F1F f28 flex aitems">
        {{ sex[info.sex] }}
        <image src="@/static/img15.png" mode=""></image>
      </view>
    </view>
    <view class="infobox1 flex aitems between" style="position: relative">
      <picker
        class="avatar-wrapper"
        mode="date"
        @change="dateChange"
        :end="end"
      >
        <view class="avatar-wrapper"></view>
      </picker>
      <view class="block1 c858585 f28"> 生日 </view>
      <view class="block3 c1F1F1F f28 flex aitems">
        {{ info.birthday ? info.birthday : "请选择" }}
        <image src="@/static/img15.png" mode=""></image>
      </view>
    </view>
    <!-- <view class="infobox1 flex aitems between" @click="show = true">
      <view class="block1 c858585 f28"> 标签 </view>
      <view class="block3 c1F1F1F f28 flex aitems">
        <view class="flex aitems label wrap">
          <view v-for="(item, index, key) in tagId" :key="key">{{
            item.name
          }}</view>
          <view class="" v-if="tagId.length == 0"> 暂无标签 </view>
        </view>
        <image src="@/static/img15.png" mode=""></image>
      </view>
    </view> -->

    <view class="infobox2 flex">
      <view class="info1" @click.stop="check = !check">
        <radio
          :checked="check"
          color="var(--view-theme)"
          style="transform: scale(0.7)"
        />
      </view>
      <view>
        <text class="info2 c999 f24"> 我已阅读并同意 </text>
        <text class="info3 f24 fontWeight">
          <text
            class="tip1"
            @click="
              gourl('/pages/user/xieyi?title=用户协议&key=user_agreement')
            "
          >
            《用户协议》
          </text>
          <text
            class="tip2"
            @click="
              gourl('/pages/user/xieyi?title=隐私政策&key=privacy_agreement')
            "
          >
            《隐私政策》
          </text>
          <!-- <text
            class="tip2"
            @click="
              gourl(
                '/pages/user/xieyi?title=消费者权益保障措施说明&key=DescriptionConsumerRightsProtectionMeasures'
              )
            "
          >
            《消费者权益保障措施说明》
          </text> -->
        </text>
      </view>
    </view>

    <view class="infobox4 f32 cfff" @click="save"> 保存 </view>

    <view class="" style="height: 100rpx"> </view>

    <u-popup
      mode="bottom"
      :safeAreaInsetBottom="false"
      :show="show"
      :overlayStyle="{ 'touch-action': 'none' }"
      bgColor="transparent"
      @close="show = false"
    >
      <view class="popbox1">
        <image src="@/static/img56.png" class="close" mode=""></image>
        <view class="block1 c1F1F1F f36 fontWeight"> 标签 </view>
        <view class="block2 c525252 f32">
          <text
            :class="item.check ? 'label themeColor active' : 'label'"
            v-for="(item, index, key) in labelList"
            :key="key"
            @click="labelListChange(index)"
          >
            {{ item.name }}
          </text>
        </view>

        <view class="infobox4 btn f32 cfff" @click="labelSave"> 确定 </view>
        <view class="" style="height: 100rpx"> </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  userinfo,
  putFileOSS,
  updateBase,
  tagList,
  wechatMobile,
  updateMobile,
  smsCode,
  wechatMsgSecCheck,
} from "@/servers/servers.js";
import { HTTP_STATUS, config } from "@/servers/config.js";
import colors from "@/mixins/color";
import { back, backtime, loading, msg, go } from "../../utils/wxAPI";
import { getToken, setGloBalData, setStorage } from "../../utils/storage";
import { sex } from "../../keys/keys";
import { formatDate } from "@/utils/util";
import { isvalidatemobile } from "@/utils/validate.js";
export default {
  mixins: [colors],
  data() {
    return {
      check: false,
      show: false,
      sex,
      end: "",
      sexList: [
        {
          name: "未知",
          id: 0,
        },
        {
          name: "男",
          id: 1,
        },
        {
          name: "女",
          id: 2,
        },
      ],
      sexListindex: null,
      labelList: [],
      info: {},
      tagId: [],
      smsCode: "",

      codetext: "获取验证码",
    };
  },
  async onLoad() {
    this.end = formatDate(Date.now()).dateValue;
    if (getToken()) {
      await this.tagList();
      this.userinfo();
    }
  },
  async onShow() {},
  methods: {
    sexChange(e) {
      this.info.sex = e.detail.value;
    },
    dateChange(e) {
      this.info.birthday = e.detail.value;
    },
    async tagList() {
      let { data } = await tagList({
        status: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let labelList = data.data;
        labelList.map((item) => {
          item.check = false;
        });
        this.labelList = labelList;
      }
      uni.hideLoading();
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        // info.mobile = "19539581169";
        this.labelList.map((item) => {
          info.userTagList.map((items) => {
            if (item.id == items.id) {
              item.check = true;
            }
          });
        });
        this.tagId = info.userTagList;
        this.info = info;
      }
      uni.hideLoading();
    },
    labelListChange(index) {
      this.labelList[index].check = !this.labelList[index].check;
    },
    async handleWechatMsgSecCheck() {
      loading();
      let { data } = await wechatMsgSecCheck({
        content: this.info.nickName,
        type: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        return data.data;
      } else {
        return;
      }
    },
    async save() {
      if (!this.check) {
        return msg(`请阅读并同意《用户协议》《隐私政策》`);
      }
      if (!this.info.avatar) {
        return msg("请授权头像");
      }
      if (!this.info.nickName) {
        return msg("请输入昵称");
      }
      let isCheck = await this.handleWechatMsgSecCheck();
      if (!isCheck) return;
      // #ifdef MP-WEIXIN
      if (!this.info.mobile) {
        return msg("请授权手机号码");
      }
      // #endif
      // #ifdef H5
      if (isvalidatemobile(this.info.mobile)[0]) {
        return msg(isvalidatemobile(this.info.mobile)[1]);
      }
      if (!this.smsCode) {
        return msg("请输入短信验证码");
      }
      // #endif
      loading();
      let tagId = [];
      this.tagId.map((item) => {
        if (item.check) tagId.push(item.id);
      });
      let { data } = await updateBase({
        avatar: this.info.avatar,
        birthday: this.info.birthday,
        nickName: this.info.nickName,
        sex: this.info.sex,
        tagId: tagId.join(","),
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.updateMobile();
      }
    },
    async updateMobile() {
      let tagId = [];
      this.tagId.map((item) => {
        if (item.check) tagId.push(item.id);
      });
      let { data } = await updateMobile({
        mobile: this.info.mobile,
        smsCode: this.smsCode,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        setGloBalData("is_authorization", true);
        setStorage("is_authorization", true);
        msg(data.msg);
        back();
      }
      uni.hideLoading();
    },
    async uploadImg() {
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          let tempFilePaths = res.tempFilePaths;
          loading();
          for (let i = 0; i < tempFilePaths.length; i++) {
            let { data } = await putFileOSS(tempFilePaths[i]);
            this.info.avatar = data.link;
            if (i == tempFilePaths.length - 1) {
              uni.hideLoading();
            }
          }
        },
      });
    },
    async onChooseAvatar(e) {
      console.log(e);
      let avatarUrl = e.detail.avatarUrl;
      loading("加载中");
      let { data } = await putFileOSS(avatarUrl);
      this.info.avatar = data.link;
      uni.hideLoading();
    },
    labelSave() {
      let tagId = [];
      this.labelList.map((item) => {
        if (item.check) {
          tagId.push(item);
        }
      });
      this.tagId = tagId;
      this.show = false;
    },
    getphonenumber(e) {
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        let code = e.detail.code;
        this.wechatMobile(code);
      } else {
        msg("授权失败");
      }
    },
    async wechatMobile(code) {
      let { data } = await wechatMobile({
        appId: config.MPappId,
        code,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.info.mobile = data.data;
      }
    },
    async getCode() {
      if (this.codetext == "获取验证码") {
        if (!this.info.mobile) {
          return msg("请输入手机号码");
        }
        loading();
        let { data } = await smsCode({
          mobile: this.info.mobile,
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          let num = 60;
          this.codetext = num;
          let timer = setInterval(() => {
            uni.hideLoading();
            num -= 1;
            this.codetext = num;
            if (num == 0) {
              this.codetext = "获取验证码";
              clearInterval(timer);
            }
          }, 1000);
        }
        uni.hideLoading();
      }
    },
    gourl(url) {
      go(url);
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  border-radius: 20rpx;
  background: #fff;
  margin: 24rpx 30rpx 0;
  padding: 32rpx 24rpx;

  .block1 {
  }

  .block2 {
    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 100rpx;
    }
  }

  .block3 {
    input {
      text-align: right;
    }

    image {
      width: 32rpx;
      height: 32rpx;
      margin-left: 16rpx;
    }

    .label {
      width: 400rpx;
      text-align: right;
      justify-content: flex-end;

      view {
        margin: 0 0 0 28rpx;
        // white-space: nowrap;
      }
    }
  }
}

.infobox4 {
  background: var(--view-theme);
  border-radius: 44rpx;
  margin: 120rpx 75rpx 0;
  padding: 24rpx 0;
  text-align: center;
}

.popbox1 {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;

  .close {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 30rpx;
    top: 40rpx;
  }

  .block1 {
    padding: 36rpx 0 0;
    text-align: center;
  }

  .block2 {
    margin: 30rpx 0rpx 0 30rpx;

    .label {
      border-radius: 18rpx;
      border: 2rpx solid #f5f5f5;
      padding: 17rpx 60rpx;
      display: inline-block;
      margin: 0 20rpx 20rpx 0;
    }

    .active {
      border: 2rpx solid var(--view-theme);
      background: var(--view-minorColorT);
    }
  }

  .btn {
  }
}

.infobox2 {
  margin: 30rpx 30rpx 0;

  .info1 {
    // width: 32rpx;
    // height: 32rpx;
  }

  .info2 {
    // margin-left: 20rpx;
  }

  .info3 {
    color: var(--view-theme);

    .tip1 {
    }

    .tip2 {
    }
  }
}
</style>
